{% extends "adminapp/master.html" %}
{% block content %}
<div class="pagetitle">
  <h1>View Feedback</h1>
  
  </nav>
</div><!-- End Page Title -->

<section class="section">
  <div class="row">
    <div class="col-lg-12">
      <div class="card shadow-sm">
        <div class="card-body">
          <h5 class="card-title text-primary">Customer Feedback for Rented bicycle</h5>

          <!-- Display Success Messages -->
          {% if messages %}
            <div class="container mt-3">
              {% for message in messages %}
                <div class="alert alert-{{ message.tags }} alert-dismissible fade show text-center" role="alert">
                  {{ message }}
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
              {% endfor %}
            </div>
          {% endif %}

          <!-- Feedback Table -->
          <div class="table-responsive">
            <table class="table table-hover align-middle text-center">
              <thead class="table-dark">
                <tr>
                  <th>#</th>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Message</th>
                </tr>
              </thead>
              <tbody>
                {% for feedback in data %}
                <tr>
                  <td>{{ forloop.counter }}</td>
                  <td>{{ feedback.name }}</td>
                  <td>{{ feedback.email }}</td>
                  <td>{{ feedback.message }}</td>
                  
                </tr>
                {% empty %}
                <tr>
                  <td colspan="6" class="text-center text-muted">No feedback available</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          <!-- End Feedback Table -->

        </div>
      </div>
    </div>
  </div>
</section>

<!-- Auto-Dismiss Alert After 4 Seconds -->
<script>
  setTimeout(function() {
    let alerts = document.querySelectorAll(".alert");
    alerts.forEach(alert => {
      alert.classList.add("fade");
      setTimeout(() => alert.remove(), 500);
    });
  }, 4000); // 4 seconds
</script>
{% endblock %}